<template>
  <div class="park-detail-bottom-left-wrapper">
    <LayoutTabsAnchor :data-list="tabsList" :current-tab.sync="currentTab">
      <!-- <template v-for="item in tabsList" #[item.value]>
        <div :id="item.value" :ref="item.value" :key="item.value" class="tab-item-content">
          <component :is="item.value" :label="item.label" />
        </div>
      </template> -->

      <BaseInfo
        id="BaseInfo"
        ref="BaseInfo"
        label="基本信息"
        :data-obj="baseInfoData"
        class="mb-[20px]"
      />

      <BaseInfo
        id="BaseInfo"
        ref="BaseInfo"
        label="设施设备"
        :data-obj="baseInfoData2"
        class="mb-[20px]"
      />

      <BaseInfo
        id="BaseInfo"
        ref="BaseInfo"
        label="运营成本"
        :data-obj="baseInfoData3"
        class="mb-[20px]"
      />

      <!-- <IndustrySupport
        id="IndustrySupport"
        ref="IndustrySupport"
        label="基础设施"
        :data-obj="industrySupportData"
        class="mb-[20px]"
      /> -->

      <!-- <ProductionCost
        id="ProductionCost"
        ref="ProductionCost"
        label="生产成本"
        :data-list="productionCostData"
        class="mb-[20px]"
      /> -->

      <PeripheralSupport
        id="PeripheralSupport"
        ref="PeripheralSupport"
        label="地理位置"
        :lng-lat="lngLat"
      />

      <!-- <template #BaseInfo> </template>

      <template #IndustryInfo> </template>

      <template #IndustrySupport> </template>

      <template #ProductionCost> </template>

      <template #PeripheralSupport> </template> -->
    </LayoutTabsAnchor>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import LayoutTabsAnchor from '@/components/portal/LayoutTabsAnchor.vue'
import BaseInfo from '@/components/portal/resource/building/BaseInfo.vue'
import PeripheralSupport from '@/components/portal/PeripheralSupport.vue'
export default Vue.extend({
  components: {
    LayoutTabsAnchor,
    BaseInfo,
    PeripheralSupport,
  },
  props: {
    dataObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      currentTab: null,
      tabsList: [
        {
          label: '资源信息',
          value: 'All',
        },
      ],
      tabsList2: [
        {
          label: '基本信息',
          value: 'BaseInfo',
        },
        {
          label: '产业情况',
          value: 'IndustryInfo',
        },
        {
          label: '产业配套',
          value: 'IndustrySupport',
        },
        {
          label: '生产成本',
          value: 'ProductionCost',
        },
        {
          label: '周边配套',
          value: 'PeripheralSupport',
        },
      ],
    }
  },
  computed: {
    industrySupportData() {
      const { infrastructure } = this.dataObj
      return {
        infrastructure,
      }
    },
    industryInfoData() {
      const { mainIndustryLabel, intendedIndustryLabel, prohibitIndustry, industryDesc } =
        this.dataObj
      return [
        {
          label: '主导产业',
          value: mainIndustryLabel && mainIndustryLabel.join(','),
        },
        {
          label: '意向产业',
          value: intendedIndustryLabel && intendedIndustryLabel.join(','),
        },
        // {
        //   label: '禁入产业',
        //   value: prohibitIndustry,
        // },
        {
          label: '产业介绍',
          value: industryDesc,
        },
      ]
    },
    baseInfoData() {
      const keysList = [
        {
          label: '楼宇面积',
          key: 'area',
          value: '--',
          unit: '㎡',
        },
        {
          label: '租售类型',
          key: 'rentOrSaleLabel',
          value: '--',
          unit: '',
        },
      ]
      const rentOrSale = this.dataObj.rentOrSale
      if (rentOrSale === '1') {
        keysList.push({
          label: '楼宇租金',
          key: 'rent',
          value: '--',
          unit: '元/平米*月',
        })
      } else if (rentOrSale === '2') {
        keysList.push({
          label: '楼宇售价',
          key: 'price',
          value: '--',
          unit: '元/平米',
        })
      }

      keysList.push(
        ...[
          {
            label: '竣工时间',
            key: 'completionTime',
            value: '--',
            unit: '年',
          },
          {
            label: '建筑高度',
            key: 'buildingHeight',
            value: '--',
            unit: '米',
          },
          {
            label: '占地面积',
            key: 'areaCovered',
            value: '--',
            unit: '平米',
          },
          {
            label: '建筑面积',
            key: 'buildingArea',
            value: '--',
            unit: '平米',
          },
          {
            label: '地上楼层数',
            key: 'upFloor',
            value: '--',
            unit: '层',
          },
          {
            label: '地下楼层数',
            key: 'downFloor',
            value: '--',
            unit: '层',
          },
          {
            label: '标准层数',
            key: 'floor',
            value: '--',
            unit: '层',
          },
          {
            label: '标准层高',
            key: 'floorHeight',
            value: '--',
            unit: '米',
          },
          {
            label: '大堂层高',
            key: 'lobbyHeight',
            value: '--',
            unit: '米',
          },
          {
            label: '大堂面积',
            key: 'lobbyArea',
            value: '--',
            unit: '平米',
          },
          {
            label: '开发单位',
            key: 'developer',
            value: '--',
            unit: '',
          },
          {
            label: '物业单位',
            key: 'property',
            value: '--',
            unit: '',
          },
        ]
      )

      keysList.forEach((d) => {
        const val = this.dataObj[d.key]
        if (val) {
          d.value = val
        }
      })
      return {
        keysList,
        desc: this.dataObj.desc,
      }
    },
    baseInfoData2() {
      const keysList = [
        {
          label: '车位总数',
          key: 'parkingSpace',
          value: '--',
          unit: '个',
        },
        {
          label: '访客车位数',
          key: 'visitorParkingSpace',
          value: '--',
          unit: '个',
        },
        {
          label: '电梯数量',
          key: 'lift',
          value: '--',
          unit: '个',
        },
        {
          label: '电梯品牌',
          key: 'liftBrand',
          value: '--',
          unit: '',
        },
        {
          label: '空调形式',
          key: 'airCondTypeLabel',
          value: '--',
          unit: '',
        },
        {
          label: '空调分户控制',
          key: 'airCondCtrlTypeLabel',
          value: '--',
          unit: '',
        },
        {
          label: '楼宇智能化',
          key: 'intelligenceLabel',
          value: '--',
          unit: '',
        },
      ]

      keysList.forEach((d) => {
        const val = this.dataObj[d.key]
        if (val) {
          d.value = val
        }

        if (val && d.key === 'intelligenceLabel') {
          d.value = val.join(',')
        }
      })

      return {
        keysList,
      }
    },
    baseInfoData3() {
      const keysList = [
        {
          label: '电价',
          key: 'powerFee',
          value: '--',
          unit: '元/度',
        },
        {
          label: '水价',
          key: 'waterFee',
          value: '--',
          unit: '元/吨',
        },
        {
          label: '停车费',
          key: 'parkingFee',
          value: '--',
          unit: '元/月',
        },
        {
          label: '物业费',
          key: 'propertyFee',
          value: '--',
          unit: '元/平米*月',
        },
        {
          label: '供暖费',
          key: 'heatingFee',
          value: '--',
          unit: '元/平米*月',
        },
        {
          label: '空调费',
          key: 'airCondFee',
          value: '--',
          unit: '元/平米*月',
        },
      ]

      keysList.forEach((d) => {
        const val = this.dataObj[d.key]
        if (val) {
          d.value = val
        }
      })

      return {
        keysList,
      }
    },
    lngLat() {
      return this.dataObj.position || ''
    },
  },
  watch: {
    currentTab(tab) {
      this.$nextTick(() => {
        console.log(tab)

        // console.log(this.$refs[tab.value].$el)
        // this.$refs[tab.value].$el.scrollIntoView()
      })
    },
  },
  mounted() {},
})
</script>
<style lang="scss" scoped>
.park-detail-bottom-left-wrapper {
  background-color: #fff;
}
</style>
